<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destory-on-close="true"
    :title="title"
    :visible.sync="dialogFormVisible"
    width="65%"
    @close="close"
  >
    <div class="personal-center-container">
      <el-row :gutter="20">
        <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
          <el-card shadow="hover">
            <div class="personal-center-user-info">
              <el-avatar :size="100" :src="form.headPortrait" />
              <div class="personal-center-user-info-full-name">
                {{ form.name }}
              </div>

              <div class="personal-center-user-info-description">
                演员分数:{{ form.actorScore }}
              </div>
              <div class="personal-center-user-info-follow">
                <!-- <a href="https://github.com/chuzhixin" target="_blank"> -->
                <!-- <el-button round type="primary">
                  <vab-icon icon="group-line" />
                  演员打分
                </el-button> -->
                <!-- </a> -->
              </div>

              <ul class="personal-center-user-info-list">
                <li>
                  <!-- <vab-icon icon="user-3-line" />
                  演员头像
                  <el-avatar :size="50" :src="form.actorPicture" /> -->
                  <!-- <img :src="form.actorPicture" /> -->
                </li>
                <li>
                  <vab-icon icon="women-line" />
                  性别
                  <span v-if="form.sex == 1">男</span>
                  <span v-if="form.sex == 0">女</span>
                </li>
                <li>
                  <vab-icon icon="magic-line" />
                  出生年月
                  {{ form.birthday }}
                </li>
                <li>
                  <vab-icon icon="community-line" />
                  身份证号
                  {{ form.idCardNum }}
                </li>

                <li>
                  <vab-icon icon="code-s-slash-line" />

                  所属领队
                  {{ form.enterpriseName }}
                </li>
                <li>
                  <el-divider />
                  <h5>用户标签</h5>
                  <el-tag v-if="form.roleId == 1" size="small">群演</el-tag>
                  <el-tag v-if="form.roleId == 2" size="small">群特</el-tag>
                  <el-tag v-if="form.roleId == 3" size="small">前景</el-tag>

                  <el-tag v-if="form.roleId == 4" size="small">特约</el-tag>

                  <el-tag v-if="form.roleId == 5" size="small">角色</el-tag>

                  <el-tag v-if="form.roleId == 6" size="small">其他</el-tag>

                  <!-- <el-tag size="small">钱多</el-tag>
                  <el-tag size="small">爱美人</el-tag>
                  <el-tag size="small">骚气十足</el-tag> -->
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="16" :md="12" :sm="24" :xl="16" :xs="24">
          <el-card shadow="hover">
            <!-- 演员基本信息 -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="基本信息" name="first">
                <el-col :lg="12" :md="16" :sm="24" :xl="12" :xs="24">
                  <el-form ref="form" label-width="80px" :model="form">
                    <el-form-item label="姓名">
                      {{ form.name }}
                    </el-form-item>

                    <el-form-item label="性别">
                      <span v-if="form.sex == 1">男</span>
                      <span v-if="form.sex == 0">女</span>
                    </el-form-item>
                    <el-form-item label="民族">
                      {{ form.minzu }}
                      <!-- <el-input v-model="form.description" type="textarea" /> -->
                    </el-form-item>
                    <el-form-item label="身高">
                      {{ form.height }}
                    </el-form-item>
                    <el-form-item label="体重">
                      {{ form.weight }}
                    </el-form-item>
                    <el-form-item label="联系电话">
                      {{ form.phone }}
                    </el-form-item>
                    <el-form-item label="兼职/全职">
                      <span v-if="form.workType == 1">全职</span>
                      <span v-else>兼职</span>
                    </el-form-item>
                    <el-form-item label="所属领队">
                      {{ form.enterpriseName }}
                    </el-form-item>
                    <!-- <el-form-item>
                      <el-button type="primary" @click="onSubmit">
                        保存
                      </el-button>
                    </el-form-item> -->
                  </el-form>
                </el-col>
              </el-tab-pane>
              <!-- 演员更多信息 -->
              <el-tab-pane label="更多信息" name="second">
                <el-form ref="formtwo" label-width="80px" :model="formtwo">
                  <el-form-item label="籍贯">
                    {{ formtwo.jiguan }}
                  </el-form-item>
                  <el-form-item label="微信号">
                    {{ formtwo.wxNumber }}
                  </el-form-item>
                  <el-form-item label="特长">
                    {{ formtwo.speciality }}
                    <!-- <el-input v-model="form.description" type="textarea" /> -->
                  </el-form-item>
                  <el-form-item label="身高">
                    {{ formtwo.height }}
                  </el-form-item>
                  <el-form-item label="教育情况">
                    {{ formtwo.degreeEdu }}
                  </el-form-item>
                  <el-form-item label="电子邮箱">
                    {{ formtwo.email }}
                  </el-form-item>
                  <el-form-item label="紧急联系人">
                    {{ formtwo.emergencyCont }}
                  </el-form-item>
                  <el-form-item label="紧急电话">
                    {{ formtwo.emergencyContPhone }}
                  </el-form-item>
                  <el-form-item label="空闲时间">
                    {{ formtwo.freeTime }}
                  </el-form-item>
                  <el-form-item label="参演作品">
                    {{ formtwo.inWork }}
                  </el-form-item>
                  <el-form-item label="毕业院校">
                    {{ formtwo.school }}
                  </el-form-item>
                  <el-form-item label="常住城市">
                    {{ formtwo.stayCity }}
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <!-- 演员履历 -->
              <el-tab-pane label="演员履历" name="three">
                <el-table
                  v-loading="listLoading"
                  border
                  :data="selectedOptions"
                  @selection-change="setSelectRows"
                >
                  <el-table-column
                    align="center"
                    show-overflow-tooltip
                    type="selection"
                  />
                  <el-table-column
                    align="center"
                    label="id"
                    prop="id"
                    show-overflow-tooltip
                  />

                  <el-table-column
                    align="center"
                    label="参演剧目"
                    prop="joinCrew"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    align="center"
                    label="角色名称"
                    prop="roleName"
                    show-overflow-tooltip
                  />

                  <el-table-column
                    align="center"
                    label="开始时间"
                    prop="startTime"
                    show-overflow-tooltip
                  />

                  <el-table-column
                    align="center"
                    label="结束时间"
                    prop="endTime"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    align="center"
                    label="备注"
                    prop="remark"
                    show-overflow-tooltip
                  />

                  <el-table-column
                    align="center"
                    label="操作"
                    show-overflow-tooltip
                    width="130"
                  >
                    <template #default="{ row }">
                      <el-button type="text" @click="handleEdit(row)">
                        编辑
                      </el-button>
                      <!-- @click="handleDelete(row)" -->
                      <!-- <el-button type="text" @click="handleDelete(row)">
                        停用
                      </el-button> -->
                      <el-button type="text" @click="handleEdittwo(row)">
                        处理
                      </el-button>
                    </template>
                  </el-table-column>
                  <template #empty>
                    <el-image
                      class="vab-data-empty"
                      :src="require('@/assets/empty_images/data_empty.png')"
                    />
                  </template>
                </el-table>
              </el-tab-pane>
              <!-- 演员相册 -->
              <el-tab-pane label="演员相册" name="four">
                <el-row :gutter="20">
                  <el-col
                    v-for="(item, index) in xiangcelist"
                    :key="index"
                    :lg="8"
                    :md="8"
                    :sm="8"
                    :xl="6"
                    :xs="24"
                  >
                    <el-card
                      :body-style="{ padding: '0px', position: 'static' }"
                      shadow="hover"
                    >
                      <vab-magnifier
                        style="width: 100%; height: 228px"
                        type="circle"
                        :url="item.albumUrl"
                        :width="150"
                      />
                      <!-- <div class="card-title">{{ item.createTime }}</div>
                      <div class="card-description">{{ item.description }}</div> -->
                      <div class="card-datetime">{{ item.createTime }}</div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <!-- 演员视频 -->
              <el-tab-pane label="演员视频" name="five">
                <el-table
                  v-loading="listLoading"
                  border
                  :data="videolists"
                  @selection-change="setSelectRows"
                >
                  <el-table-column
                    align="center"
                    label="视频名称"
                    prop="videoName"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    align="center"
                    label="视频地址"
                    prop="videoUrl"
                    show-overflow-tooltip
                    width="500"
                  >
                    <template slot-scope="scope">
                      <a
                        class="buttonText"
                        :href="scope.row.videoUrl"
                        target="_blank"
                      >
                        {{ scope.row.videoUrl }}
                      </a>
                    </template>
                  </el-table-column>

                  <el-table-column
                    align="center"
                    label="创建时间"
                    prop="createTime"
                    show-overflow-tooltip
                  />

                  <template #empty>
                    <el-image
                      class="vab-data-empty"
                      :src="require('@/assets/empty_images/data_empty.png')"
                    />
                  </template>
                </el-table>
              </el-tab-pane>
              <!-- 分数列表 -->
              <el-tab-pane label="分数列表" name="six">
                当前分数为： {{ intsfenshu }}
                <el-table
                  v-loading="listLoading"
                  border
                  :data="fenshulists"
                  @selection-change="setSelectRows"
                >
                  <el-table-column
                    align="center"
                    label="演员姓名"
                    prop="actorName"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    align="center"
                    label="打分原因"
                    prop="scoreReason"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    align="center"
                    label="打分变化"
                    prop="actorScoreTo"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    align="center"
                    label="打分后的分数"
                    prop="actorScore"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    align="center"
                    label="平台来源"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <template v-if="scope.row.platformSource == 0">
                        小程序
                      </template>
                      <template v-else-if="scope.row.platformSource == 1">
                        Pc端
                      </template>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="操作员"
                    prop="createUserNickname"
                    show-overflow-tooltip
                  />

                  <el-table-column
                    align="center"
                    label="创建时间"
                    prop="createTime"
                    show-overflow-tooltip
                  />

                  <template #empty>
                    <el-image
                      class="vab-data-empty"
                      :src="require('@/assets/empty_images/data_empty.png')"
                    />
                  </template>
                </el-table>
                <el-pagination
                  background
                  :current-page="queryForm.pageNum"
                  :layout="layout"
                  :page-size="queryForm.pageSize"
                  :total="total"
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                />
              </el-tab-pane>
              <!-- moka -->
              <el-tab-pane label="摩卡相册" name="eight">
                <el-row :gutter="20">
                  <el-col
                    v-for="(item, index) in mokalist"
                    :key="index"
                    :lg="8"
                    :md="8"
                    :sm="8"
                    :xl="6"
                    :xs="24"
                  >
                    <el-card
                      :body-style="{ padding: '0px', position: 'static' }"
                      shadow="hover"
                    >
                      <div class="demo-image__preview">
                        <el-image :preview-src-list="srcList" :src="item" />
                      </div>
                      <!-- <div class="card-title">{{ item.createTime }}</div>
                      <div class="card-description">{{ item.description }}</div> -->
                      <!-- <div class="card-datetime">{{ item.createTime }}</div> -->
                    </el-card>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
      <vab-cropper ref="vabCropper" />
    </div>
  </el-dialog>

  <!-- 增加 -->
</template>

<script>
  /* eslint-disable*/
  import {
    doAdd,
    serach,
    roleId,
    check,
    geturl,
    checktwo,
    getlvli,
    getxiangce,
    getvideo,
    getdafen,
    genggai,
  } from '@/api/yanyuan'
  import {
    provinceAndCityData,
    regionData,
    provinceAndCityDataPlus,
    regionDataPlus,
    CodeToText,
    TextToCode,
  } from 'element-china-area-data'
  import { mapGetters } from 'vuex'
  import VabMagnifier from '@/extra/VabMagnifier'
  import VabCropper from '@/extra/VabCropper'

  export default {
    name: 'xiangqing',
    components: { VabCropper, VabMagnifier },
    data() {
      // 手机号码验证
      var contactPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'))
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          if (reg.test(value)) {
            callback()
          } else {
            return callback(new Error('请输入正确的手机号'))
          }
        }
      }
      const validatesurfacePlot = (rule, value, callback) => {
        if (this.form.actorPicture === '') {
          callback(new Error('请添加头像图片!!!!'))
        } else {
          callback()
        }
      }
      const validatesurfacePlotwo = (rule, value, callback) => {
        if (this.form.moka === '') {
          callback(new Error('请添加摩卡图片!!!!'))
        } else {
          callback()
        }
      }
      return {
        intsfenshu: '', //当前分数
        listLoading: true,
        idall: '', //给子组件传递的id
        idCardFront: '', //正面
        idCardReverse: '', //范面
        activeName: 'first', //默认展示第一项
        pickerOptions: {
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date())
              },
            },
            {
              text: '昨天',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              },
            },
            {
              text: '一周前',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              },
            },
          ],
        },
        options: regionDataPlus,
        selectedOptions: [], //履历信息
        xiangcelist: [], //相册列表
        mokalist: [], //摩卡相册
        srcList: [], //摩卡相册
        keyWord: '', //关键词
        videolists: [], //视频列表
        fenshulists: [], //分数列表
        selectRows: '',
        token: '',
        imageUrl: '',
        imageUrltwo: '', //摩卡
        getlist: '',
        value: true,
        value1: true,
        dialogVisible: false,
        disabled: false,
        options1: [],
        options2: [],
        options3: [],
        shfenone: '', //身份证整
        shfentwo: '', //身份证反面
        options5: [
          {
            id: 1,
            creClasName: '审核通过',
          },
          {
            id: 0,
            creClasName: '审核未通过',
          },
        ],
        options6: [
          {
            id: 1,
            creClasName: '审核通过',
          },
          {
            id: 0,
            creClasName: '审核未通过',
          },
        ],
        valueone: '', //查询
        valuetwo: '',
        shujv: '暂无数据',
        form: {
          fullName: unescape('\u695a\u829d\u99a8'),
          nickname: 'good luck',
          sex: 2,
          description: unescape(
            '\u5bcc\u5728\u672f\u6570\uff0c\u4e0d\u5728\u52b3\u8eab\uff1b\u5229\u5728\u52bf\u5c45\uff0c\u4e0d\u5728\u529b\u8015\u3002'
          ),
        },
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        formtwo: {},
        formalls: {}, //履历信息保存
        formthree: {
          starUserId: 683, //移动端用户id
          checkValue: '', //审核的结果
          rejectReason: '', //拒绝原因
        },
        queryForm: {
          pageNum: 1,
          pageSize: 10,
          actInfoId: '', //分数
        },
        activated() {
          if (this.$refs.MaskVideo.src) this.$refs.MaskVideo.play()
        },
        deactivated() {
          if (this.$refs.MaskVideo.src) this.$refs.MaskVideo.pause()
        },

        rules: {
          rejectReason: [
            { required: true, trigger: 'blur', message: '请输入驳回原因' },
          ],
          checkValue: [
            { required: true, trigger: 'change', message: '请选择审核状态' },
          ],
        },
        rulesTWO: {
          rejectReason: [
            { required: true, trigger: 'blur', message: '请输入驳回原因' },
          ],
          checkValue: [
            { required: true, trigger: 'change', message: '请选择审核状态' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {
      this.token = this.$store.getters['user/token']
      this.fetchDatatwo()
    },
    computed: {
      ...mapGetters({
        avatar: 'user/avatar',
      }),
    },
    methods: {
      // handleDelete(row) {
      //   console.log('rwo', row)
      //   console.log('rowid', row.id)
      //   //停用
      //   if (row.id) {
      //     this.$baseConfirm('你确定要停用当前项吗', null, async () => {
      //       const { msg } = await doDelete({ ids: row.id })
      //       this.$baseMessage(msg, 'success', 'vab-hey-message-success')
      //       await this.fetchData()
      //     })
      //   }
      // },
      setSelectRows(val) {
        this.selectRows = val
      },

      onSubmit() {
        this.$baseMessage('模拟保存成功', 'success', 'vab-hey-message-success')
      },
      openDialog() {
        this.$refs['vabCropper'].dialogVisible = true
      },
      handleClick(tab, event) {},
      enterprise(e) {
        this.form.enterprise = e.id

        this.getlist = e.leaNickName
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return true
      },
      beforeAvatarUploadtwo(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return true
      },
      choose(e) {
        this.form.crewTheme = e.themeName
        this.form.crewThemeId = e.id
      }, //选择区域
      chooseone(e) {
        this.form.areaName = e.areaName
        this.form.areaId = e.id
      },
      handleChange(a) {
        this.form.particulars = a
      },
      handleAvatarSuccess(res, file, fileList) {
        this.imageUrl = URL.createObjectURL(file.raw)

        this.form.actorPicture = res.data
      },
      handleAvatarSuccesstwo(res, file, fileList) {
        this.imageUrltwo = URL.createObjectURL(file.raw)
        this.form.moka = res.data
      },
      showEdit(row, meetdata) {
        if (!row) {
          //==if(row=='')
          this.title = '添加'
        } else {
          console.log('roleId', row.roleId)

          this.title = '演员详情'
          this.form = row
          this.formtwo = row
          this.idall = row.id
          this.idCardReverse = row.idCardReverse
          this.idCardFront = row.idCardFront
          this.queryForm.actInfoId = row.id
          this.geturltwo()
          this.geturlone()
          this.getlvlilist()
          this.getxiangcelist()
          this.videolist()
          this.dafenlist()
          this.mokalist = row.mokaArray
          this.srcList = row.mokaArray
        }
        this.dialogFormVisible = true
      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.dafenlist()
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.dafenlist()
      },
      async dafenlist() {
        //分数列表
        this.listLoading = true
        const res = await getdafen(this.queryForm)
        console.log('213', res)
        this.fenshulists = res.data.dataList

        let index = this.fenshulists.length - 1
        this.intsfenshu = this.form.actorScore
        this.total = res.data.total

        this.listLoading = false
      },
      async videolist() {
        //视频链接列表
        this.listLoading = true
        const res = await getvideo({
          actorId: this.idall,
        })

        this.videolists = res.data
        this.listLoading = false
      },
      async getlvlilist() {
        //履历列表
        this.listLoading = true
        const res = await getlvli({
          actorId: this.idall,
        })
        this.selectedOptions = res.data
        this.listLoading = false
      },
      async getxiangcelist() {
        //相册列表
        this.listLoading = true
        const res = await getxiangce({
          actorId: this.idall,
        })
        this.xiangcelist = res.data

        this.listLoading = false
      },
      close() {
        let userId = this.form.userId
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        if (!this.form.id) {
          this.form.userId = userId
        }
        this.dialogFormVisible = false
        this.imageUrl = ''
        this.imageUrltwo = ''
      },
      closetwo() {
        this.formtwo.checkValue = ''
        this.formtwo.rejectReason = ''
        this.dialogFormVisible = false
      },
      sethealth(e) {
        this.form.health = e
      },
      sethealthtwo(e) {
        this.form.workType = e
      },

      nickNameChange() {
        this.$forceUpdate()
      },
      queryDatass() {
        this.queryData()
      },
      optosall(e) {
        this.formtwo.checkValue = e.id
      },
      optosallTWO(e) {
        this.formthree.checkValue = e.id
      },
      queryData() {
        //chaxun
        this.disabled = true
        let keyWord = this.keyWord
        const msg = serach({
          keyWord: keyWord,
        })
        msg.then((res) => {
          if (res.msg == 'success') {
            this.options1 = res.data
          }
        })
      },
      async fetchDatatwo() {
        let queryForm = {}
        const res = await roleId(queryForm)
        this.options2 = res.data
      },
      async geturlone() {
        const res = await geturl({
          f: this.idCardFront,
        })
        this.shfenone = res
      },
      async geturltwo() {
        const res = await geturl({
          f: this.idCardReverse,
        })
        this.shfentwo = res
      },
    },
  }
</script>
<style lang="scss" scoped>
  .avatar-uploader .el-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    width: 178px;
    height: 178px;
    font-size: 28px;
    line-height: 178px;
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    display: block;
    width: 178px;
    height: 178px;
  }
  .baocun {
    width: 100%;
    height: 100%;
  }
  $base: '.personal-center';
  #{$base}-container {
    padding: 0 !important;
    background: $base-color-background !important;

    #{$base}-user-info {
      padding: $base-padding;
      text-align: center;

      ::v-deep {
        .el-avatar {
          img {
            cursor: pointer;
          }
        }
      }

      &-full-name {
        margin-top: 15px;
        font-size: 24px;
        font-weight: 500;
        color: #262626;
      }

      &-description {
        margin-top: 8px;
      }

      &-follow {
        margin-top: 15px;
      }

      &-list {
        margin-top: 18px;
        line-height: 30px;
        text-align: left;
        list-style: none;

        h5 {
          margin: -20px 0 5px 0;
        }

        ::v-deep {
          .el-tag {
            margin-right: 10px !important;
          }

          .el-tag + .el-tag {
            margin-left: 0;
          }
        }
      }
    }

    #{$base}-item {
      display: flex;

      i {
        font-size: 40px;
      }

      &-content {
        box-sizing: border-box;
        flex: 1;
        margin-left: $base-margin;

        &-second {
          margin-top: 8px;
        }
      }
    }
  }
</style>
